<template>
  <div class="container">
    <el-tabs v-model="params.type" type="card" @tab-click="handleClick">
      <el-tab-pane label="新增日志" name="add"></el-tab-pane>
      <el-tab-pane label="更新日志" name="update"></el-tab-pane>
    </el-tabs>

    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="params.name" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input
          v-model="params.mobile"
          placeholder="请输入手机号"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData.rows" stripe>
      <el-table-column prop="params.name" label="姓名" width="120" />
      <el-table-column prop="params.mobile" label="手机号" width="120" />
      <!-- <el-table-column prop="params.email" label="邮箱" /> -->
      <el-table-column prop="params.email" label="标签" min-width="300">
        <template #default="scope">
          <div v-if="scope.row.params.tag && scope.row.params.tag.length">
            {{ tag_format(scope.row.params.tag) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作结果">
        <template #default="scope">
          <div v-if="scope.row.result.status == 'Y'">成功</div>
          <div v-else>{{ scope.row.result.errmsg }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作时间">
        <template #default="scope">
          {{ proxy.$utils.dateTimeFormateFn(scope.row._add_time, "all") }}
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-if="tableData['total']"
      :total="tableData['total']"
      v-model:page="params.pageIndex"
      v-model:limit="params.pageSize"
      @pagination="getInfo"
    />
  </div>
</template>

<script setup lang="ts">
import { nextTick } from "vue";

const { proxy } = getCurrentInstance();

let activeName = ref("first");
let tableData = ref([]);
let params = ref({
  pageIndex: 1,
  pageSize: 50,
  type: "add",
  name: "",
  mobile: "",
});
let tags = [];

onMounted(() => {
  getInfo();
  getTags();
});

function onSubmit() {
  params.value.pageIndex = 1;
  getInfo();
}

function tag_format(array) {
  if (!tags.length) return;
  let tagArr = [];
  array.forEach((element) => {
    let index = proxy.$utils.findIndexByField(tags, "tagid", element);
    tagArr.push(tags[index]?.tagname);
  });
  return tagArr.join(",");
}

async function getTags() {
  tags = await proxy.$apis.moxueyuanTags({ type: "list" });
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  params.value.pageIndex = 1;
  nextTick(() => {
    getInfo();
  });
};

async function getInfo() {
  tableData.value = await proxy.$apis.moxueyuanLog({
    type: "list",
    data: params.value,
  });
}
</script>

<style lang="scss" scoped>
.container {
  margin: 20px;
}
</style>
